<template>

  <div class="home">
    <!-- 头部 -->
    <van-nav-bar        
        title="肚子叫了吗外卖"
        right-text="登录|注册"
        @click-right="onClickRight" 
        style="background-color: #FFF781;"
        fixed="true"
    />
    <!-- 轮播图 -->
    <van-swipe :autoplay="5000" indicator-color="#1989fa" style="margin-bottom:10px;margin-top:40px">
        <van-swipe-item><img src="../dist/images/01.png" alt="" style="width:100%"></van-swipe-item>
        <van-swipe-item><img src="../dist/images/02.png" alt="" style="width:100%"></van-swipe-item>    
    </van-swipe>

    <van-cell title="附近商家" icon="coupon-o" />

    <!-- 店铺 -->
    <div>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh" loosing-text>
            <p style="display:none">刷新次数: {{ count }}</p>
            <van-card
                price="25起送 / 配送费￥3"
                tag="热销" 
                thumb="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576508330244&di=55e25c14e10362c8780f416bb5c4ae1d&imgtype=0&src=http%3A%2F%2Fwww.gongzhuangcn.cn%2Fuploads%2F180127%2F5-1P12G416444P.png"
                @click-thumb="doStore"
                
                >
                <div slot="tags">
                    <p style="font-size:18px;margin-block-start: 0.5em;margin-block-end: 0.5em;font-weight:bold">异次元烧烤</p>
                    <van-rate v-model="value" readonly size="12"/>月出售731件
                    <van-tag plain type="primary">肚子叫了吗专送</van-tag>     
                </div>
            </van-card>
            <van-card
                price="25起送 / 配送费￥3"
                tag="热销" 
                thumb="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576508330244&di=55e25c14e10362c8780f416bb5c4ae1d&imgtype=0&src=http%3A%2F%2Fwww.gongzhuangcn.cn%2Fuploads%2F180127%2F5-1P12G416444P.png"
                >
                <div slot="tags">
                    <p style="font-size:18px;margin-block-start: 0.5em;margin-block-end: 0.5em;font-weight:bold">异次元烧烤</p>
                    <van-rate v-model="value" readonly size="12"/>月出售731件
                    <van-tag plain type="primary">肚子叫了吗专送</van-tag>     
                </div>
            </van-card>
            <van-card
                price="25起送 / 配送费￥3"
                tag="热销" 
                thumb="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576508330244&di=55e25c14e10362c8780f416bb5c4ae1d&imgtype=0&src=http%3A%2F%2Fwww.gongzhuangcn.cn%2Fuploads%2F180127%2F5-1P12G416444P.png"
                >
                <div slot="tags">
                    <p style="font-size:18px;margin-block-start: 0.5em;margin-block-end: 0.5em;font-weight:bold">异次元烧烤</p>
                    <van-rate v-model="value" readonly size="12"/>月出售731件
                    <van-tag plain type="primary">肚子叫了吗专送</van-tag>     
                </div>
            </van-card>
            <van-card
                price="25起送 / 配送费￥3"
                tag="热销" 
                thumb="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576508330244&di=55e25c14e10362c8780f416bb5c4ae1d&imgtype=0&src=http%3A%2F%2Fwww.gongzhuangcn.cn%2Fuploads%2F180127%2F5-1P12G416444P.png"
                >
                <div slot="tags">
                    <p style="font-size:18px;margin-block-start: 0.5em;margin-block-end: 0.5em;font-weight:bold">异次元烧烤</p>
                    <van-rate v-model="value" readonly size="12"/>月出售731件
                    <van-tag plain type="primary">肚子叫了吗专送</van-tag>     
                </div>
            </van-card>
            <van-card
                price="25起送 / 配送费￥3"
                tag="热销" 
                thumb="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576508330244&di=55e25c14e10362c8780f416bb5c4ae1d&imgtype=0&src=http%3A%2F%2Fwww.gongzhuangcn.cn%2Fuploads%2F180127%2F5-1P12G416444P.png"
                >
                <div slot="tags">
                    <p style="font-size:18px;margin-block-start: 0.5em;margin-block-end: 0.5em;font-weight:bold">异次元烧烤</p>
                    <van-rate v-model="value" readonly size="12"/>月出售731件
                    <van-tag plain type="primary">肚子叫了吗专送</van-tag>     
                </div>
            </van-card>
            <van-card
                price="25起送 / 配送费￥3"
                tag="热销" 
                thumb="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576508330244&di=55e25c14e10362c8780f416bb5c4ae1d&imgtype=0&src=http%3A%2F%2Fwww.gongzhuangcn.cn%2Fuploads%2F180127%2F5-1P12G416444P.png"
                >
                <div slot="tags">
                    <p style="font-size:18px;margin-block-start: 0.5em;margin-block-end: 0.5em;font-weight:bold">异次元烧烤</p>
                    <van-rate v-model="value" readonly size="12"/>月出售731件
                    <van-tag plain type="primary">肚子叫了吗专送</van-tag>     
                </div>
            </van-card>
            <van-card
                price="25起送 / 配送费￥3"
                tag="热销" 
                thumb="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576508330244&di=55e25c14e10362c8780f416bb5c4ae1d&imgtype=0&src=http%3A%2F%2Fwww.gongzhuangcn.cn%2Fuploads%2F180127%2F5-1P12G416444P.png"
                >
                <div slot="tags">
                    <p style="font-size:18px;margin-block-start: 0.5em;margin-block-end: 0.5em;font-weight:bold">异次元烧烤</p>
                    <van-rate v-model="value" readonly size="12"/>月出售731件
                    <van-tag plain type="primary">肚子叫了吗专送</van-tag>     
                </div>
            </van-card>
            <van-card
                price="25起送 / 配送费￥3"
                tag="热销" 
                thumb="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576508330244&di=55e25c14e10362c8780f416bb5c4ae1d&imgtype=0&src=http%3A%2F%2Fwww.gongzhuangcn.cn%2Fuploads%2F180127%2F5-1P12G416444P.png"
                >
                <div slot="tags">
                    <p style="font-size:18px;margin-block-start: 0.5em;margin-block-end: 0.5em;font-weight:bold">异次元烧烤</p>
                    <van-rate v-model="value" readonly size="12"/>月出售731件
                    <van-tag plain type="primary">肚子叫了吗专送</van-tag>     
                </div>
            </van-card>
            <van-card
                price="25起送 / 配送费￥3"
                tag="热销" 
                thumb="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576508330244&di=55e25c14e10362c8780f416bb5c4ae1d&imgtype=0&src=http%3A%2F%2Fwww.gongzhuangcn.cn%2Fuploads%2F180127%2F5-1P12G416444P.png"
                >
                <div slot="tags">
                    <p style="font-size:18px;margin-block-start: 0.5em;margin-block-end: 0.5em;font-weight:bold">异次元烧烤</p>
                    <van-rate v-model="value" readonly size="12"/>月出售731件
                    <van-tag plain type="primary">肚子叫了吗专送</van-tag>     
                </div>
            </van-card>
            <van-card
                price="25起送 / 配送费￥3"
                tag="热销" 
                thumb="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576508330244&di=55e25c14e10362c8780f416bb5c4ae1d&imgtype=0&src=http%3A%2F%2Fwww.gongzhuangcn.cn%2Fuploads%2F180127%2F5-1P12G416444P.png"
                >
                <div slot="tags">
                    <p style="font-size:18px;margin-block-start: 0.5em;margin-block-end: 0.5em;font-weight:bold">异次元烧烤</p>
                    <van-rate v-model="value" readonly size="12"/>月出售731件
                    <van-tag plain type="primary">肚子叫了吗专送</van-tag>     
                </div>
            </van-card>
        </van-pull-refresh>
    </div>
        


    <!-- 底 -->
    <van-tabbar route >
        <van-tabbar-item
            replace
            to="/"
            icon="home-o"
        >
            首页
        </van-tabbar-item>
        <van-tabbar-item
            replace
            to="/search"
            icon="search"
        >
            搜索
        </van-tabbar-item>
        <van-tabbar-item
            replace
            to="/notes"
            icon="notes-o"
        >
            订单
        </van-tabbar-item>
        <van-tabbar-item
            replace
            to="/about"
            icon="contact"
        >
            我的
        </van-tabbar-item>
    </van-tabbar>
  </div>
  
</template>

<script>
export default {
  data() {
    return {
      value: 4,
      count: 0,
      isLoading: false
    };
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isLoading = false;
        this.count++;
      }, 500);
    },
    onClickRight(){
        this.$router.push('/login')
    },
    doStore(){
        this.$router.push('/shop')
    },

  }
}
</script>


<style>

    
</style>